<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>js</title>
</head>

<style>
	img{
		width: 200px;
		height: 300px;
		left: 20px;
	}
</style>
<body>
	<img src="a.jpg" alt="" id="imgid" >
</body>

<script>
	imgobj=document.getElementById('imgid');
	xs=0;
	xv=10;

	ys=0;
	yv=10;
	document.onkeydown=function(event){
		kc=event.keyCode;//键盘码
		document.title=kc;

		switch(kc){
			case 37:
				xs-=xv;
				imgobj.style.marginLeft=xs+'px';
				document.body.style.background='#f00';
				break;
			case 38:
				ys-=yv;
				imgobj.style.marginTop=ys+'px';
				document.body.style.background='#0f0';
				break;
			case 39:
			
				xs+=xv;
				imgobj.style.marginLeft=xs+'px';
				document.body.style.background='#00f';
				break;
			case 40:
				ys+=yv;
				imgobj.style.marginTop=ys+'px';
				document.body.style.background='#f0f';
				break;
		}
	}
</script>
</html>